<template>
    <div class="left-top">
        <div class="left-top-module1">
            <Title title="智能对比"></Title>
            <div class="left-top-module1-list">
                <div class="left-top-module1-list-item" v-for="(v, k) in state.list" :key="k">
                    <div class="left-top-module1-list-item-top">
                        <div class="left-top-module1-list-item-top-index">{{ k + 1 }}</div>
                        <div class="left-top-module1-list-item-top-name">
                            <AnimateNumber :value="v.num"></AnimateNumber>
                        </div>
                    </div>
                    <div class="left-top-module1-list-item-bottom">
                        <AnimateNumber :value="v.num2"></AnimateNumber>
                    </div>
                </div>
            </div>
        </div>
        <div class="left-top-module2">
            <Title title="关系分析"></Title>
            <div class="left-top-module2-list">
                <div class="left-top-module2-list-item" v-for="(v, k) in data" :key="k">
                    <chart :option="v"></chart>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import chart from '@/components/echarts-box.vue'
import Title from '../common/title.vue'
import AnimateNumber from '@/components/number/index.vue'
import data from './leftTop'
const state = reactive({
    list: [
        { name: '二氧化碳', num: '320', num2: 320 },
        { name: '氧气', num: '180', num2: 87 },
        { name: '氮气', num: '400', num2: 138 },
        { name: 'PM2.5', num: '120', num2: 351 },
    ],

})
onMounted(() => {
    setInterval(() => {
        for (let x of state.list) {
            x.num2 += Math.floor(Math.random() * 10)
        }
    }, 5000)
})
</script>
<style lang="less" scoped>
.left-top {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 400px;
    height: 450px;
    display: flex;
    flex-direction: column;

    &-module1 {
        &-list {
            margin: 20px 0;
            display: flex;

            &-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 20px;

                &:last-child {
                    margin-right: 0;
                }

                &-top {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    width: 65px;
                    height: 56px;
                    background: url(@/images/index/border1.png) no-repeat;
                    background-size: 100% 100%;

                    &-index {
                        width: 17px;
                        height: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: url(@/images/index/numberBg.png) no-repeat;
                        background-size: 100% 100%;
                        font-size: 13px;
                        color: #000;
                    }

                    &-name {
                        font-size: 12px;
                        font-family: Adobe Heiti Std;
                        font-weight: normal;
                        color: #00FFFF;
                    }
                }

                &-bottom {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 79px;
                    height: 31px;
                    font-size: 16px;
                    font-family: Adobe Heiti Std;
                    font-weight: normal;
                    color: #FFFFFF;

                    background: url(@/images/index/border2.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }

    &-module2 {
        flex: 1;
        display: flex;
        flex-direction: column;

        &-list {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            &-item {
                margin: 10px;
                width: 156px;
                height: 115px;
                position: relative;
            }
        }
    }
}</style>